package myJs.cps.myTable

import myJs.cps.BootstrapTableCp.Column
import myJs.cps.Style
//import myJs.myPkg.i18n.ReactI18next
import myJs.tool.Pojo._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object SelectColumnCp {

  case class Props(columnShowMap: SeqMap[String, Boolean], fieldColumnMap: SeqMap[String, Column],
                   columnShowMapChange: SeqMap[String, Boolean] => Unit)

  val component = FunctionalComponent[Props] { props =>

    object FTool{

      def columnShow(curField: String, b: Boolean) = () => {
        val curColumnShows = props.columnShowMap.updated(curField, b)
        props.columnShowMapChange(curColumnShows)
      }

    }

    div(
      label("Select the columns to display:"),
      div(className := "checkbox",
        props.columnShowMap.drop(1).map { case (field, show) =>
          val column = props.fieldColumnMap(field)
          span(key := s"${field}",
            span(style := Style(whiteSpace = "nowrap"),
              input(style := Style(marginLeft = 0), `type` := "checkbox", checked := show, value := s"${field}",
                onChange := FTool.columnShow(field, !show)),
              label(style := Style(marginRight = 15, paddingLeft = 0, marginLeft = 20), column.title)
            ), " "
          )
        }
      )
    )

  }

}
